<template>
    <view class="DataSelect">
        <picker mode="selector" :range="list" range-key="name" @change="onChange">
            <view class="select-picker select-picker-border">
                <text class="placeholder" :class="displayValue === placeholder ? 'default' : ''">{{ displayValue }}</text>
            </view>
        </picker>
    </view>
</template>

<script>
export default {
    name: "DataSelect",
    data() {
        return {
            list: [],
            displayValue: "",
        }
    },

    props: {
        //双向绑定的的id、name、obj
        id: [Number, Array, String],
        name: [Array, String],
        obj: null,

        //表名
        table: {
            type: String,
        },

        //下拉列表显示名称
        label: {
            type: String,
            default: "name"
        },

        //下拉列表选择的值
        value: {
            type: String,
            default: "autoID"
        },

        //提示信息
        placeholder: {
            type: String,
            default: "请选择"
        },

        //接口方法名
        action: {
            type: String,
            default: "GetSearchWithIsDelete"
        },

        //接口方法是否为函数方法
        actionIsFunc: {
            type: Boolean,
            default: true
        },

        //搜索条件
        filter: {
            type: Object,
            default() {
                return {}
            }
        },

        //是否异步请求数据
        async: {
            type: Boolean,
            default: true
        },

        //是否只显示Picker，如果为true，则需要通过父组件其它事件来触发显示或隐藏
        onlyPicker: {
            type: Boolean,
            default: false
        },

        //在组件加载时是否加载数据
        isLoadingData: {
            type: Boolean,
            default: true,
        }
    },
    created() {
        this.displayValue = this.placeholder;
        if (this.isLoadingData == true) {
            this.initList();
        }
    },
    watch: {
        // id: {
        //     handler(newVal, oldVal) {
        //         this.setDefaultSelect(newVal);
        //     },
        //     immediate: true,//首次加载时就要执行
        // }
    },
    methods: {
        //初始化列表数据
        initList() {
            //通过属性来判断api的对象是函数还是非函数
            let api;
            if (this.actionIsFunc) {
                api = this.$app.api[this.table][this.action]();
            } else {
                api = this.$app.api[this.table][this.action];
            }

            //调用接口拿数据
            this.$app.CallApi(api, {
                data: this.filter,
                async: this.async,
                success: (res) => {
                    this.list = res;
                    this.setDefaultSelect(this.id);
                }
            });
        },

        //显示选择框
        show(_idx = 0) {
            this.isShow = true;
        },

        //隐藏选择框
        hide() {
            this.isShow = false;
        },

        //设置默认选中，参数id指的是数据id，即与this.id表示同一个意思
        setDefaultSelect(id) {
            // if (!this.$gx.IsEmpty(id) && !this.$gx.IsEmpty(this.columns) && !this.$gx.IsEmpty(this.columns[0])) {
            //     var _idx = this.columns[0].findIndex((x) => {
            //         return x[this.value] == id;
            //     });

            //     if (_idx != -1) {
            //         this.$set(this.defaultIndex, "0", _idx);
            //     }
            // }
        },

        //确认
        onChange(obj) {
            let selItem = null;
            if (obj && obj.detail && obj.detail.value > -1) {
                let _idx = obj.detail.value;

                selItem = this.list[_idx];
                this.$emit("update:id", selItem[this.value]);
                this.$emit("update:name", selItem[this.label]);
                this.$emit("update:obj", selItem);
                this.displayValue = selItem[this.label];

            } else {
                this.$emit("update:id", null);
                this.$emit("update:name", null);
                this.$emit("update:obj", null);
            }

            this.$nextTick(() => {
                console.log(this.id, this.name, this.obj);
            })

            this.$emit("change", selItem);
        },
    }
}
</script>

<style scoped>
.DataSelect {
    width: 100%;
}

.select-picker {

    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    font-size: 14px;
    line-height: 36px;
    padding: 0 5px;
    overflow: hidden;
    text-indent: 4px;
}

.select-picker-border {
    border-radius: 4px;
    border-width: 0.5px !important;
    border-color: #dadbde !important;
    border-style: solid;
}

.placeholder.default {
    color: grey;
    text-indent: 0px;
}
</style>